<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>开关灯示例</title>
    <!-- 引入 Vue 3 全局版本 -->
    <script src="js/vue.js"></script>
    <style>
        /* 容器使用 flex 布局，设置为垂直排列 */
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 按钮样式 */
        button {
            margin-bottom: 10px;
        }

        /* 图片样式 */
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 按钮文本根据 isOn 状态决定 -->
        <button @click="toggleLight">{{ isOn ? '关灯' : '开灯' }}</button>
        <!-- 根据 isOn 状态决定显示哪个图片 -->
        <img :src="isOn ? 'img/on.jpg' : 'img/off.jpg'" alt="">
    </div>

    <script>
        // 创建 Vue 应用实例
        const app = Vue.createApp({
            data() {
                return {
                    // 初始状态为开灯
                    isOn: true
                };
            },
            methods: {
                // 切换灯光状态的方法
                toggleLight() {
                    this.isOn = !this.isOn;
                }
            }
        });
        // 将应用挂载到 id 为 app 的 DOM 元素上
        app.mount('#app');
    </script>
</body>

</html>